<template>
  <div class="person-container">
    <h2>Vue路由的测试</h2>
    <!--导航区-->
    <div class="navigate">
      <RouterLink replace to="/home" class="nav-link">首页</RouterLink>
      <RouterLink to="/news" class="nav-link">新闻</RouterLink>
      <RouterLink replace to="/about" class="nav-link">关于</RouterLink>
    </div>
    <!--展示区 -->
    <div class="show">
      <!-- 这里可以添加展示内容 -->
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="Person">
// 你可以在这里添加逻辑代码
import {RouterView} from 'vue-router'
</script>

<style scoped>
.person-container {
  background-color: burlywood;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  color: black; /* 设置字体颜色为黑色 */
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.navigate {
  margin: 20px 0;
  display: flex;
  justify-content: center;
}

.nav-link {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease;
  padding: 5px 10px;
  border-radius: 5px;
}

.nav-link:hover {
  color: #fff;
  background-color: #007bff;
}

.show {
  margin-top: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
}
</style>
